<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body style="position: relative;">
		<div style="position: fixed;width: 100%;z-index: 999;">
			<span id="btn_goback" class="mui-icon mui-icon-close mui-pull-right" style="font-size: 200%;margin-right: 2%;margin-top: 2%;"></span>
		</div>
		<div id="body_map" class="mui-content" style="width: 100%;height: 100%;position: absolute;z-index: -1;">
			<img id="img_map" />
		</div>
		<div style="position: fixed;top: 80%;left: 10%;z-index: 999;">
			<img src="../image/jiahao.png" id="enlarge"></img>
			<br />
			<img id="narrow" src="../image/jianhao.png"></img>
		</div>
		<div id="btn_map" style="position:relative;z-index: 99;">
		</div>

		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			var zoomInt = 1;
			var body_width = document.getElementById("body_map").clientWidth;
			var body_height = document.getElementById("body_map").clientHeight;

			function createMap(top, left, name) {
				var div = document.createElement("div");
				div.innerHTML = '<div style="position:absolute;top: ' + top + ';left: ' + left + ';height: 2em;text-align: center;"> <p style = "color: #000000;margin: 0px;font: 0.8em;" >' + name + '</p> <img src = "../image/coordinate.png"style = "padding-top: 0px;margin-top: 0px;width: 1.5em;" / ></div>';
				return div;
			}

			function test(test) {
				if(test == "a") {
					if((zoomInt + 0.1) < 2) {
						zoomInt = zoomInt + 0.1;
						document.getElementById("img_map").style.zoom = zoomInt;
						document.getElementById("btn_map").style.zoom = zoomInt;
						console.log("放大zoomInt=" + zoomInt + "widht=" + document.getElementById("img_map").width);
						return;
					}
				} else {
					if((zoomInt - 0.1) >= 1) {
						zoomInt = zoomInt - 0.1;
						document.getElementById("img_map").style.zoom = zoomInt;
						document.getElementById("btn_map").style.zoom = zoomInt;
						console.log("缩小zoomInt=" + zoomInt + "widht=" + document.getElementById("img_map").width);
						return;
					}
				}
			}

			mui.init();
			mui.plusReady(function() {
				document.getElementById("btn_goback").addEventListener("tap", function() {
					plus.webview.currentWebview().close();
				});
				switch(plus.webview.currentWebview().mapName) {
					case "baoshan":
						document.getElementById("img_map").src = "../image/quxian_map/baoshan.jpg";
						break;
					case "jiading":
						document.getElementById("img_map").src = "../image/quxian_map/jiading.jpg";
						break;
					case "jinshan":
						document.getElementById("img_map").src = "../image/quxian_map/jinshan.jpg";
						break;
					case "jingan":
						document.getElementById("img_map").src = "../image/quxian_map/jingan.jpg";
						break;
					case "qingpu":
						document.getElementById("img_map").src = "../image/quxian_map/qingpu.jpg";
						break;
					case "songjiang":
						document.getElementById("img_map").src = "../image/quxian_map/songjiang.jpg";
						break;
					case "xuhui":
						document.getElementById("img_map").src = "../image/quxian_map/xuhui.jpg";
						break;
					case "pudong":
						document.getElementById("img_map").src = "../image/quxian_map/pudong.jpg";
						break;
					case "hongkou":
						document.getElementById("img_map").src = "../image/quxian_map/hongkou.jpg";
						break;
					case "fengxian":
						document.getElementById("img_map").src = "../image/quxian_map/fengxian.jpg";
						break;
					case "huangpu":
						document.getElementById("img_map").src = "../image/quxian_map/huangpu.jpg";
						break;
					case "yangpu":
						document.getElementById("img_map").src = "../image/quxian_map/yangpu.jpg";
						break;
					case "changning":
						document.getElementById("img_map").src = "../image/quxian_map/changning.jpg";
						break;
					case "chongming":
						document.getElementById("img_map").src = "../image/quxian_map/chongming.jpg";
						break;
					case "minhang":
						document.getElementById("img_map").src = "../image/quxian_map/minhang.jpg";
						break;
					case "putuo":
						document.getElementById("img_map").src = "../image/quxian_map/putuo.jpg";
						break;
				}
				document.getElementById("img_map").style.height = body_height + "px";
				document.getElementById("btn_map").style.height = body_height + "px";
				document.getElementById("btn_map").style.width = document.getElementById("img_map").width + "px";

				document.getElementById("enlarge").addEventListener("tap", function() {
					test("a");
				});
				document.getElementById("narrow").addEventListener("tap", function() {
					test("");
				});
				plus.webview.currentWebview().show("fade-in", 300);
				plus.nativeUI.closeWaiting();
			});
		</script>
	</body>

</html>